<template>
	<view class="refund">
		<view class="list_s" v-for="(item, index) in orderData.goods" :key="index">
			<image :src="item.img" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{ item.title }}</p>
				<p class="p2">
					<text class="text1">¥{{ item.price }} x {{ item.num }}</text>
				</p>
				<p class="p3">
					<text class="text2" :style="{ color: newColor.color }">小计：</text>
					<text class="text1">¥{{ item.total_price }}</text>
				</p>
			</view>
		</view>
		<p class="youhui" v-if="status == 1">
			<text class="text1">退款原因</text>
			<image src="../../static/image/right.png" mode=""></image>
			<text class="text2" @tap="openPicker">{{ yuanyi || '请选择退款原因' }}</text>
		</p>
		<p class="youhui">
			<text class="text1">退款金额</text>
			<text class="text2" :style="{ color: newColor.color }">¥{{ orderData.order.total_price }}</text>
		</p>
		<view class="tips">
			<text>退款说明</text>
			<textarea placeholder-style="color:#999999;font-size:24upx;" placeholder="(必填)" auto-height @blur="getTips" />
		</view>
		<p class="youhui" style="border-bottom: none;" v-if="status == 1">
			<text class="text1">上传凭证</text>
			<text class="text3">(最多3张)</text>
		</p>
		<view class="img_box" v-if="status == 1">
			<view class="img_list" v-for="(item, index) in imgData" :key="index">
				<image :src="item" mode="" class="imgs"></image>
				<image src="../../static/image/close.png" mode="" class="close" @tap="delImg(index)"></image>
			</view>
			<view class="addImg" @tap="addImg" v-if="imgData.length < 3">
				<image src="../../static/image/shexiang.png" mode=""></image>
				<p>添加凭证</p>
			</view>
		</view>
		<p class="submit" @tap="submit" :style="{ background: newColor.color }">提交申请</p>
		<lb-picker
			:confirm-color="newColor.color"
			empty-text="暂无数据"
			radius="10px"
			mode="multiSelector"
			:level="1"
			:props="myProps"
			@confirm="setyuanyin"
			:list="dataList"
			ref="picker"
			style="border-bottom: none;"
		></lb-picker>
		<ourLoading isFullScreen :active="active" text="提交中..." />
	</view>
</template>

<script>
import LbPicker from '@/components/lb-picker/index.vue';
export default {
	components: {
		LbPicker
	},
	data() {
		return {
			imgUrl: ['1', '2'],
			count: 3,
			dataList: [
				{ name: '当天无理由退货', id: '当天无理由退货' },
				{ name: '产品质量问题', id: '产品质量问题' },
				{ name: '服务点择错误', id: '提货服务网点选择错误' },
				{ name: '不想要了', id: '不想要了' },
				{ name: '其他原因', id: '其他原因' }
			],
			myProps: {
				label: 'name',
				value: 'id'
			},
			active: false,
			status: 0,
			orderid: '',
			tips: '',
			orderData: {},
			yuanyi: '',
			imgData: []
		};
	},
	onShow() {
		this.status = this.$Route.query.status;
		this.orderid = this.$Route.query.orderid;
		this.getOrderData();
	},
	methods: {
		openPicker() {
			this.$refs.picker.show();
		},
		getTips(e) {
			this.tips = e.detail.value;
		},
		setyuanyin(e) {
			console.log(e);
			this.yuanyi = e.value[0];
		},
		addImg() {
			let that = this;
			uni.chooseImage({
				//该方法是调出选择图片的方法
				count: 1, //数量限制
				sizeType: ['original', 'compressed'], //可选 原图 或缩略图
				success: function(res) {
					//返回的值为本地的图片的链接
					uni.showLoading({
						title: '上传中...'
					});
					var tempFilePaths = res.tempFilePaths;
					for (var x = 0; x < res.tempFilePaths.length; x++) {
						wx.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[x], //选择图片返回的相对路径
							encoding: 'base64', //这个是很重要的
							success: res => {
								//成功的回调
								//返回base64格式
								console.log('base64' + res.data);
								that.uploadImg(res.data);
							}
						});
					}
				}
			});
		},
		uploadImg(base64) {
			console.log('上传图片');
			this.request(
				'upFiles/upload',
				{
					img: base64
				},
				'post'
			).then(res => {
				console.log('上传结果', res);
				uni.hideLoading();
				if (res.code == 200) {
					this.imgData.push(res.data.url);
				}
			});
		},
		delImg(index) {
			//删除图片
			this.imgData.splice(index, 1);
		},
		getOrderData() {
			this.request('order/orderDetail', {
				order_id: this.orderid
			}).then(res => {
				console.log(res);
				this.orderData = res.data;
			});
		},
		submit() {
			//申请退款
			this.active = true;
			setTimeout(() => {
				this.active = false;
				if (this.tips == '') {
					uni.showToast({
						title: '请输入退款说明',
						icon: 'none'
					});
					return;
				}
				if (this.status == 0) {
					this.ontuikuan();
				} else if (this.status == 1) {
					this.onaftermarket();
				}
			}, 400);
		},
		ontuikuan() {
			this.request('order/addRefund', {
				order_id: this.orderid,
				remark: this.tips
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功,请等待审核!',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.push({ path: '/pages/user/order_list/order_list' });
					}, 1500);
				}
			});
		},
		onaftermarket() {
			//申请售后
			if (this.yuanyi == '') {
				uni.showToast({
					title: '请选择退款原因',
					icon: 'none'
				});
				return;
			}
			let img = this.imgData.join(',');
			console.log(img);
			this.request(
				'aftermarket/addSaleAfter',
				{
					order_id: this.orderid,
					remark: this.tips,
					reason: this.yuanyi,
					img: img
				},
				'post'
			).then(res => {
				console.log(res);
				if (res.code == 400) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功,请等待审核!',
						icon: 'none'
					});
					setTimeout(() => {
						this.$Router.push('pages/user/order_list/order_list');
					}, 1500);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	margin: 0 20upx;
	margin-top: 20upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 28upx;
	border-radius: 10upx;

	image {
		width: 250upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 90upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(100, 100, 100, 1);
		}
	}
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 30upx;
	border-bottom: 1upx solid #f2f2f2;
	box-sizing: content-box;
	.text1 {
		font-size: 28upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 28upx;
		margin-right: 5upx;
		margin-top: 2upx;
	}
	.text3 {
		font-size: 24upx;
		color: #999999;
		margin-left: 10upx;
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
		margin-left: 10upx;
	}
}
.tips {
	height: auto;
	overflow: hidden;
	padding: 30upx;
	// width: 100%;
	display: flex;
	border-bottom: 1rpx solid #f2f2f2;
	box-sizing: content-box;
	text {
		float: left;
		color: #333333;
		font-size: 28upx;
		width: 16vw;
	}
	/* #ifdef MP-WEIXIN */
	textarea {
		float: left;
		font-size: 24upx;
		// margin-top: 25upx;
		margin-top: 7upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */

	/* #ifdef H5 */
	textarea {
		float: left;
		font-size: 24upx;
		margin-top: 2upx;
		margin-left: 10upx;
		padding-bottom: 10upx;
		box-sizing: content-box;
	}
	/* #endif */
}
.img_box {
	overflow: hidden;
	padding: 30upx;
	.addImg {
		width: 184upx;
		height: 184upx;
		background: #f2f2f2;
		// background-color: pink;
		border-radius: 20upx;
		overflow: hidden;
		transition: all 0.3s;
		image {
			width: 51upx;
			height: 42upx;
			display: block;
			margin: 0 auto;
			margin-top: 45upx;
		}
		p {
			font-size: 24upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(242, 58, 58, 1);
			text-align: center;
			margin-top: 20upx;
		}

		&:active {
			transform: scaleX(0.96);
		}
	}
}
.img_list {
	width: 184upx;
	height: 184upx;
	border-radius: 20upx;
	float: left;
	margin-right: 20upx;
	position: relative;
	.imgs {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20upx;
	}
	.close {
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 0upx;
		right: 0upx;
	}
}
.submit {
	width: 500upx;
	height: 76upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 76upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 100upx;
}
</style>
